<!--
 * @Authoer: dusong
 * @Description:逻辑系统管理
 * @Date 2017/12/5 14:16
 * @Modified By:
 *
-->
<div id="logicSys">
	<!-- demo -->
	<p style='text-align: center;color:#444;font-size: 14px;font-weight: 500;'>demop</p>
	<yu-panel :title="$t('logicSysManager.ljxtgldemo')">
		<!-- <el-button @click="setCrelStra">{{ $t('logicSysManager.szrzcl') }}</el-button> -->
		<!-- <el-button @click="handleModify('edit')">{{ $t('logicSysManager.xg') }}</el-button> -->
	</yu-panel>
	<div style='padding: 0 24px;'>
	  <!-- <yu-xform related-table-name="refTable" form-type="search">
	    <yu-xform-group :column="4">
	      <yu-xform-item placeholder="姓名" ctype="input" name="name"></yu-xform-item>
	      <yu-xform-item placeholder="时间" ctype="datepicker" name="createAt"></yu-xform-item>
	      <yu-xform-item placeholder="类型" ctype="select" name="type" data-code="NATIONALITY"></yu-xform-item>
	    </yu-xform-group>
	  </yu-xform> -->
	  <!-- <yu-xtable ref="refTable" row-number :data-url="demo.treeUrl" selection-type="radio" :table-columns="demo.tableColumns" :data-params="demo.dataParams">
	    <yu-xtable-column label="编码" prop="id" width="110"></yu-xtable-column>
	    <yu-xtable-column label="姓名" prop="title" width="200" sortable></yu-xtable-column>
	    <yu-xtable-column label="类型" prop="type" width="110" data-code="NATIONALITY"></yu-xtable-column>
	    <yu-xtable-column label="阅读数" prop="pageviews" width="100"></yu-xtable-column>
	    <yu-xtable-column label="状态" prop="status" width="120" data-code="PUBLISH_STATUS"></yu-xtable-column>
	    <yu-xtable-column label="时间" prop="createAt"></yu-xtable-column>
	  </yu-xtable> -->
	  <el-table-x ref="pointTable" :checkbox="true" :data-url="demo.treeUrl" :table-columns="pointTableColumns" @custom-row-click="rowClick">
	  </el-table-x>
	</div>
	<!-- <yu-col :span="12">
	  <div class="yu-dashboard-box">
	    <div class="yu-dashboard-title">
	      <h1>当日报警数</h1>
	    </div>
	    <div class="yu-dashboard-content yu-error-box">
	      <div class="yu-error-num">
	        <span>{{warnNum}}</span>
	      </div>
	      <div class="yu-error-echart">
	        <yu-echarts :option="warnEchartOption"></yu-echarts>
	      </div>
	    </div>
	  </div>
	</yu-col> -->
	<!-- layout布局 -->
	<yu-row>
	  <yu-col :span="24"><div class="grid-content bg-purple-dark"></div></yu-col>
	</yu-row>
	<yu-row>
	  <yu-col :span="12"><div class="grid-content bg-purple"></div></yu-col>
	  <yu-col :span="12"><div class="grid-content bg-purple-light"></div></yu-col>
	</yu-row>
	<yu-row>
	  <yu-col :span="8"><div class="grid-content bg-purple"></div></yu-col>
	  <yu-col :span="8"><div class="grid-content bg-purple-light"></div></yu-col>
	  <yu-col :span="8"><div class="grid-content bg-purple"></div></yu-col>
	</yu-row>
	<yu-row>
	  <yu-col :span="6"><div class="grid-content bg-purple"></div></yu-col>
	  <yu-col :span="6"><div class="grid-content bg-purple-light"></div></yu-col>
	  <yu-col :span="6"><div class="grid-content bg-purple"></div></yu-col>
	  <yu-col :span="6"><div class="grid-content bg-purple-light"></div></yu-col>
	</yu-row>
	<yu-row>
	  <yu-col :span="4"><div class="grid-content bg-purple"></div></yu-col>
	  <yu-col :span="4"><div class="grid-content bg-purple-light"></div></yu-col>
	  <yu-col :span="4"><div class="grid-content bg-purple"></div></yu-col>
	  <yu-col :span="4"><div class="grid-content bg-purple-light"></div></yu-col>
	  <yu-col :span="4"><div class="grid-content bg-purple"></div></yu-col>
	  <yu-col :span="4"><div class="grid-content bg-purple-light"></div></yu-col>
	</yu-row>
	<div>
	  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
	  <el-link type="primary">主要链接</el-link>
	  <el-link type="success">成功链接</el-link>
	  <el-link type="warning" :underline="false">警告链接</el-link>
	  <el-link type="danger" disabled>危险链接</el-link>
	  <el-link type="info">信息链接</el-link>
	</div>
	<!-- 单选框组 -->
	<yu-radio-group v-model="radio2">
	    <yu-radio :label="3">备选项</yu-radio>
	    <yu-radio :label="6">备选项</yu-radio>
	    <yu-radio :label="9">备选项</yu-radio>
	</yu-radio-group>
	<!-- 按钮样式 -->
	<div>
	    <yu-radio-group v-model="radio3">
	      <yu-radio-button label="上海"></yu-radio-button>
	      <yu-radio-button label="北京"></yu-radio-button>
	      <yu-radio-button label="广州"></yu-radio-button>
	      <yu-radio-button label="深圳"></yu-radio-button>
	    </yu-radio-group>
	  </div>
	  <div style="margin-top: 20px">
	    <yu-radio-group v-model="radio4" size="medium">
	      <yu-radio-button label="上海" ></yu-radio-button>
	      <yu-radio-button label="北京"></yu-radio-button>
	      <yu-radio-button label="广州"></yu-radio-button>
	      <yu-radio-button label="深圳"></yu-radio-button>
	    </yu-radio-group>
	  </div>
	  <div style="margin-top: 20px">
	    <yu-radio-group v-model="radio5" size="small">
	      <yu-radio-button label="上海"></yu-radio-button>
	      <yu-radio-button label="北京" disabled ></yu-radio-button>
	      <yu-radio-button label="广州"></yu-radio-button>
	      <yu-radio-button label="深圳"></yu-radio-button>
	    </yu-radio-group>
	  </div>
	  <div style="margin-top: 20px">
	    <yu-radio-group v-model="radio6" disabled size="mini">
	      <yu-radio-button label="上海"></yu-radio-button>
	      <yu-radio-button label="北京"></yu-radio-button>
	      <yu-radio-button label="广州"></yu-radio-button>
	      <yu-radio-button label="深圳"></yu-radio-button>
	    </yu-radio-group>
	  </div>
	  <!-- 多选框组 -->
	  <yu-checkbox-group v-model="checkList">
	      <yu-checkbox label="复选框 A"></yu-checkbox>
	      <yu-checkbox label="复选框 B"></yu-checkbox>
	      <yu-checkbox label="复选框 C"></yu-checkbox>
	      <yu-checkbox label="禁用" disabled></yu-checkbox>
	      <yu-checkbox label="选中且禁用" disabled></yu-checkbox>
	  </yu-checkbox-group>
	  <!-- input输入框金额格式化 -->
	  <yu-input v-model="money" type="num" placeholder="请输入内容" :formatter="formatter" :digit="3" autofocus></yu-input>
	  <!-- input框可清空 -->
	  <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
	  <!-- input密码框 -->
	  <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
	  <!-- 带 icon 的输入框 -->
	  <div class="demo-input-suffix">
	    属性方式：
	    <el-input
	      placeholder="请选择日期"
	      suffix-icon="el-icon-date"
	      v-model="input1">
	    </el-input>
	    <el-input
	      placeholder="请输入内容"
	      prefix-icon="el-icon-search"
	      v-model="input2">
	    </el-input>
	  </div>
	  <div class="demo-input-suffix">
	    slot 方式：
	    <el-input
	      placeholder="请选择日期"
	      v-model="input3">
	      <i slot="suffix" class="el-input__icon el-icon-date"></i>
	    </el-input>
	    <el-input
	      placeholder="请输入内容"
	      v-model="input4">
	      <i slot="prefix" class="el-input__icon el-icon-search"></i>
	    </el-input>
	  </div>
	  <p>远程搜索</p>
	  <yu-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></yu-autocomplete>
	  <!-- Breadcrumb 面包屑 -->
	  <yu-breadcrumb separator="/">
	    <yu-breadcrumb-item>首页</yu-breadcrumb-item>
	    <yu-breadcrumb-item>活动管理</yu-breadcrumb-item>
	    <yu-breadcrumb-item>活动列表</yu-breadcrumb-item>
	    <yu-breadcrumb-item>活动详情</yu-breadcrumb-item>
	  </yu-breadcrumb>
	  <!-- 插槽演示 -->
	  <yu-timeline>
	     <yu-timeline-item v-for="(item, index) in timelineItems" :key="index" :timeline-items="timelineItems">
	        <div slot="title">{{item.title}}</div>
	        <div slot="date">{{item.date}}</div>
	        <div slot="description" v-html="item.description"></div>
	      </yu-timeline-item>
	  </yu-timeline>
	  <div class="echartDom">
	    <yu-echarts :option="echartOption"></yu-echarts>
	  </div>
	  <div class="echartDom-gl">
	    <yu-echarts :option="echartOptionGl"></yu-echarts>
	  </div>
</div>
<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  input{
	  width: 200px !important;
  }
  .echartDom{
	  height: 500px;
  }
  .echartDom-gl{
	  height: 500px;
  }
</style>